window.addEventListener('load', function () {
  var arrow_l = document.querySelector('.arrow-l');
  var arrow_r = document.querySelector('.arrow-r');
  var focus = document.querySelector('.focus');
  var focusWidth = focus.offsetWidth;
  var num = 0;
  // circle 控制小圆圈的播放
  var circle = 0;
  var flag = true; //节流阀
  focus.addEventListener('mouseenter', function () {
    arrow_l.style.display = 'block';
    arrow_r.style.display = 'block';
    clearInterval(timer);
    timer = null;
  })
  focus.addEventListener('mouseleave', function () {
    arrow_l.style.display = 'none';
    arrow_r.style.display = 'none';
    timer = setInterval(function () {
      arrow_r.click();   //手动调用点击事件
    }, 2000)
  })
  var ul = focus.querySelector('ul');
  var ol = focus.querySelector('.circle')
  for (var i = 0; i < ul.children.length; i++) {
    var li = document.createElement('li');   //创建节点
    li.setAttribute('index', i);  //设置索引号
    ol.appendChild(li);                     //插入节点
    li.addEventListener('click', function () {
      for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';              //清除所有li的类名
      }
      this.className = 'current';                   //留下我自己的类名 
      var index = this.getAttribute('index');
      num = index;
      circle = index;
      animate(ul, -index * focusWidth)
    })
  }
  ol.children[0].className = 'current';     //将第一个li设置类名
  var first = ul.children[0].cloneNode(true);   //克隆第一个li
  ul.appendChild(first);                     //将他放在最后面
  console.log(ul.children.length);
  console.log(ol.children.length);
  arrow_r.addEventListener('click', function () {
    if (flag) {
      flag = false;   //关闭节流阀
      if (num == ul.children.length - 1) {
        ul.style.left = 0;
        num = 0;
      }
      num++;
      animate(ul, -num * focusWidth, function () {
        flag = true;  //打开节流阀
      });
      circle++;
      if (circle == ul.children.length - 1) {
        circle = 0;
      }
      circleChange();
    }
  })
  arrow_l.addEventListener('click', function () { //左侧按钮
    if (flag) {
      flag = false;
      if (num == 0) {
        ul.style.left = -(ul.children.length - 1) * focusWidth + 'px';
        num = ul.children.length - 1;
      }
      num--;
      animate(ul, -num * focusWidth, function () {
        flag = true;
      });
      circle--;
      if (circle < 0) {
        circle = ol.children.length - 1;   //circle = circle < 0 ? ol.children.length - 1 : circle;
      }
      circleChange();
    }
  })
  function circleChange() {
    for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
    }
    ol.children[circle].className = 'current';
  }
  //自动播放轮播图
  var timer = setInterval(function () {
    arrow_r.click();   //手动调用点击事件
  }, 2000)

})